<template>
  <!--拨付设置-->
  <div class="container mainCon">
    <div style="position: relative">
      <div
        style="
          position: absolute;
          top: 30px;
          left: 130px;
          z-index: 100;
          font-size: 12px;
          color: #666666;
        "
      >
        设置辖区内各区域各行业工程项目的工资专户拨付条件，以便自动生成各项目的专户拨付计划，督促企业按时足额拨付工资款至工资专户。
      </div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="tabs"
      >
        <el-tab-pane label="拨付设置" name="first">
          <allocationSetList
            v-if="isShowFirst && basicConfig"
            :basicConfig="basicConfig"
          ></allocationSetList>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import allocationSetList from './allocationSetList'
export default {
  name: 'allocationSet',
  components: {
    allocationSetList,
  },
  data() {
    return {
      basicConfig: '', //系统配置
      activeName: 'first',
      isShowFirst: true,
      // isShowSecond: false
    }
  },
  async created() {
    await this.getBasicConfig() //获取系统配置
  },
  methods: {
    // 获取系统配置
    getBasicConfig() {
      return new Promise((resolve, reject) => {
        this.axios({
          method: 'get',
          url: 'api-acc/cs/disbursesetup/expand/get',
        })
          .then((res) => {
            resolve(res)
            if (!res.data.hasError) {
              this.basicConfig = res.data.result
            }
          })
          .catch((error) => {
            reject(error)
            this.$message({
              showClose: true,
              duration: 3000,
              message: '获取系统配置失败',
              type: 'error',
            })
          })
      })
    },
    //tabs栏切换
    // handleClick(tab, event) {
    //   if (tab.label == "拨付设置") {
    //     this.isShowFirst = true;
    //   } else if (tab.label == "保底额设置") {
    //     this.isShowSecond = true;
    //   }
    // }
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 130px;
  padding: 0;
}
// tab栏切换
.tabs {
  /deep/ .el-tabs__content {
    background: #fff;
    min-height: 800px;
    padding: 24px;
  }
  /deep/ .el-tabs__header {
    margin: 0;
  }
  /deep/ .el-tabs__nav-scroll {
    overflow: hidden;
    background: #e4ebf1;
    /* margin-top: 10px; */
    padding-top: 15px;
  }
  /deep/ .el-tabs__item.is-active {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    background: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  /deep/ .el-tabs__item {
    color: #333;
    background: #d5e0e9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  /deep/ .el-tabs__item:first-child {
    margin: 0 4px 1px 24px;
  }
  /deep/ .el-tabs__item {
    margin-right: 4px;
  }
  /deep/ .el-tabs__item:last-child {
    margin-right: 0;
  }
}
</style>
